<template>
	<main>
		<!-- 概览卡片 -->
		<div class="dashboard-overview">
			<div class="overview-card">
				<div class="card-title">
					<i class="fas fa-building"></i>
					<span>监控区域</span>
				</div>
				<div class="card-value">{{ overviewData.areas }}</div>
				<div class="card-trend trend-up">
					<i class="fas fa-arrow-up"></i>
					<span>较上月增加 {{ overviewData.areasIncrease }} 个</span>
				</div>
			</div>

			<div class="overview-card">
				<div class="card-title">
					<i class="fas fa-tachometer-alt"></i>
					<span>设备效率</span>
				</div>
				<div class="card-value">{{ overviewData.efficiency }}%</div>
				<div class="card-trend trend-up">
					<i class="fas fa-arrow-up"></i>
					<span>较上月提升 {{ overviewData.efficiencyIncrease }}%</span>
				</div>
			</div>

			<div class="overview-card">
				<div class="card-title">
					<i class="fas fa-leaf"></i>
					<span>节能指标</span>
				</div>
				<div class="card-value">{{ overviewData.energySaving }}%</div>
				<div class="card-trend trend-up">
					<i class="fas fa-arrow-up"></i>
					<span>达到目标 {{ overviewData.energyTarget }}%</span>
				</div>
			</div>

			<div class="overview-card">
				<div class="card-title">
					<i class="fas fa-bolt"></i>
					<span>总能耗</span>
				</div>
				<div class="card-value">{{ overviewData.totalEnergy }} kW</div>
				<div class="card-trend trend-down">
					<i class="fas fa-arrow-down"></i>
					<span>较昨日减少 {{ overviewData.energyDecrease }}%</span>
				</div>
			</div>
		</div>

		<!-- 图表区域 -->
		<div class="chart-section">
			<div class="chart-container">
				<div class="chart-header">
					<div class="chart-title">区域温度分布</div>
					<div class="chart-actions">
						<button class="chart-btn active">实时</button>
						<button class="chart-btn">24小时</button>
						<button class="chart-btn">7天</button>
					</div>
				</div>
				<div class="chart-wrapper">
					<div ref="tempChart" style="width: 100%; height: 100%;"></div>
				</div>
			</div>

			<div class="chart-container">
				<div class="chart-header">
					<div class="chart-title">设备健康状态</div>
				</div>
				<div class="chart-wrapper">
					<div ref="healthChart" style="width: 100%; height: 100%;"></div>
				</div>
			</div>
		</div>

		<!-- 区域监控 -->
		<div class="area-monitor">
			<div class="area-card" v-for="area in areas" :key="area.id">
				<div class="area-title">
					<div class="area-name">
						<div class="area-icon">
							<i :class="area.icon"></i>
						</div>
						<span>{{ area.name }}</span>
					</div>
					<div class="device-status" :class="'status-' + area.status">
						{{ area.statusText }}
					</div>
				</div>

				<div class="area-stats">
					<div class="stat-item">
						<div class="stat-label">平均温度</div>
						<div class="stat-value">{{ area.avgTemp }}°C</div>
					</div>
					<div class="stat-item">
						<div class="stat-label">平均湿度</div>
						<div class="stat-value">{{ area.avgHumidity }}%</div>
					</div>
					<div class="stat-item">
						<div class="stat-label">设备数量</div>
						<div class="stat-value">{{ area.deviceCount }}</div>
					</div>
					<div class="stat-item">
						<div class="stat-label">能耗</div>
						<div class="stat-value">{{ area.energy }} kW/h</div>
					</div>
				</div>

				<div class="device-list">
					<div class="device-item" v-for="device in area.devices" :key="device.id">
						<div class="device-info">
							<div class="device-icon">
								<i class="fas fa-snowflake"></i>
							</div>
							<div>
								<div>{{ device.name }}</div>
								<div class="stat-label">温度: {{ device.temp }}°C</div>
							</div>
						</div>
						<div class="device-status" :class="'status-' + device.status">
							{{ device.statusText }}
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 告警面板 -->
		<div class="alerts-panel">
			<div class="chart-header">
				<div class="chart-title">实时告警</div>
				<div class="chart-actions">
					<button class="chart-btn">查看全部</button>
				</div>
			</div>

			<div class="alert-item" :class="{ warning: alert.type === 'warning' }" v-for="alert in alerts" :key="alert.id">
				<div class="alert-icon">
					<i class="fas fa-exclamation"></i>
				</div>
				<div class="alert-content">
					<div class="alert-title">{{ alert.title }}</div>
					<div class="alert-desc">{{ alert.description }}</div>
					<div class="alert-time">{{ alert.time }}</div>
				</div>
				<div class="alert-action">处理</div>
			</div>
		</div>
	</main>
</template>
  
<script setup>
import {
	ref, reactive, onMounted, onBeforeUnmount
} from 'vue';
import * as echarts from 'echarts';
const overviewData = reactive({
	areas: 24,
	areasIncrease: 3,
	efficiency: 92,
	efficiencyIncrease: 4,
	energySaving: 15,
	energyTarget: 90,
	totalEnergy: '8,427',
	energyDecrease: 3.2
});

const areas = reactive([
	{
		id: 1,
		name: '数据中心',
		icon: 'fas fa-server',
		status: 'warning',
		statusText: '高温警告',
		avgTemp: 28.7,
		avgHumidity: 32,
		deviceCount: 18,
		energy: 2450,
		devices: [
			{ id: 101, name: 'DC-主空调', temp: 28.7, status: 'warning', statusText: '高温' },
			{ id: 102, name: 'DC-备用1', temp: 26.2, status: 'normal', statusText: '正常' },
			{ id: 103, name: 'DC-机柜A', temp: 25.8, status: 'normal', statusText: '正常' }
		]
	},
	{
		id: 2,
		name: '办公区域',
		icon: 'fas fa-building',
		status: 'normal',
		statusText: '运行正常',
		avgTemp: 24.2,
		avgHumidity: 45,
		deviceCount: 42,
		energy: 1820,
		devices: [
			{ id: 201, name: '办公A区', temp: 24.3, status: 'normal', statusText: '正常' },
			{ id: 202, name: '办公B区', temp: 24.1, status: 'normal', statusText: '正常' },
			{ id: 203, name: '会议室1', temp: 23.8, status: 'normal', statusText: '正常' }
		]
	},
	{
		id: 3,
		name: '生产车间',
		icon: 'fas fa-industry',
		status: 'offline',
		statusText: '部分离线',
		avgTemp: 26.5,
		avgHumidity: 38,
		deviceCount: 28,
		energy: 3150,
		devices: [
			{ id: 301, name: '车间A区', temp: 26.7, status: 'normal', statusText: '正常' },
			{ id: 302, name: '车间B区', temp: 0, status: 'offline', statusText: '离线' },
			{ id: 303, name: '包装区', temp: 25.9, status: 'normal', statusText: '正常' }
		]
	}
]);

const alerts = reactive([
	{
		id: 1,
		type: 'warning',
		title: '数据中心 - 高温告警',
		description: '温度28.7°C超过阈值25°C',
		time: '10:24:35'
	},
	{
		id: 2,
		type: 'critical',
		title: '生产车间 - 设备离线',
		description: '车间B区空调失去连接',
		time: '09:45:12'
	},
	{
		id: 3,
		type: 'warning',
		title: '办公区域 - 高能耗',
		description: '办公A区能耗超过平均值35%',
		time: '08:32:47'
	}
]);
// 图表实例引用
const tempChart = ref(null);
const healthChart = ref(null);
let tempChartInstance = null;
let healthChartInstance = null;

// 初始化图表
const initCharts = () => {
	// 温度分布图
	tempChartInstance = echarts.init(tempChart.value);
	tempChartInstance.setOption({
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['数据中心', '办公区域', '生产车间'],
			textStyle: {
				color: '#555'
			},
			right: 10,
			top: 0
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00'],
			axisLine: {
				lineStyle: {
					color: '#ddd'
				}
			},
			axisLabel: {
				color: '#666'
			}
		},
		yAxis: {
			type: 'value',
			name: '温度 (°C)',
			nameTextStyle: {
				color: '#666'
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#ddd'
				}
			},
			axisLabel: {
				color: '#666'
			},
			splitLine: {
				lineStyle: {
					color: '#eee'
				}
			}
		},
		series: [
			{
				name: '数据中心',
				type: 'line',
				smooth: true,
				symbol: 'circle',
				symbolSize: 8,
				lineStyle: {
					normal: {
						width: 2,
						color: "#ff8a00",
					}
				},
				itemStyle: {
					color: "#ff8a00",
					borderWidth: 2
				},
				data: [28.5, 27.8, 26.2, 27.5, 28.7, 28.2, 27.9,24.0, 23.7 ,26.3,]
			},
			{
				name: '办公区域',
				type: 'line',
				smooth: true,
				symbol: 'circle',
				symbolSize: 8,
				lineStyle: {
					normal: {
						width: 2,
						color: "#00c6ff",
					}
				},
				itemStyle: {
					color: "#00c6ff",
					borderWidth: 2
				},
				data: [23.8, 23.5, 24.2, 24.5, 24.3, 24.0, 23.7 ,26.3, 25.9,24.6,]
			},
			{
				name: '生产车间',
				type: 'line',
				smooth: true,
				symbol: 'circle',
				symbolSize: 8,
				lineStyle: {
					normal: {
						width: 2,
						color: "#6a11cb",
					}
				},
				itemStyle: {
					color: "#6a11cb",
					borderWidth: 2
				},
				data: [25.8, 25.5, 26.2, 26.8, 26.5, 26.3, 25.9,24.6,26.9,25.1]
			}
		]
	});

	// 设备健康状态图
	healthChartInstance = echarts.init(healthChart.value);
	healthChartInstance.setOption({
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'horizontal',
			bottom: 0,
			textStyle: {
				color: '#555'
			}
		},
		series: [
			{
				name: '设备状态',
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '18',
						fontWeight: 'bold',
						color: '#333'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{ value: 76, name: '健康', itemStyle: { color: '#00e676' } },
					{ value: 12, name: '警告', itemStyle: { color: '#ffc400' } },
					{ value: 6, name: '故障', itemStyle: { color: '#ff1744' } },
					{ value: 6, name: '离线', itemStyle: { color: '#9e9e9e' } }
				]
			}
		]
	});
};

// 更新数据
const updateData = () => {
	// 更新概览数据
	overviewData.efficiency = 92 + Math.floor(Math.random() * 2);
	overviewData.energySaving = 15 + Math.floor(Math.random() * 2);
	overviewData.totalEnergy = (8427 + Math.floor(Math.random() * 100)).toLocaleString();

	// 更新区域温度
	areas.forEach(area => {
		if (area.status !== 'offline') {
			area.avgTemp = parseFloat((area.avgTemp + (Math.random() - 0.5) * 0.3).toFixed(1));

			area.devices.forEach(device => {
				if (device.status !== 'offline') {
					device.temp = parseFloat((device.temp + (Math.random() - 0.5) * 0.5).toFixed(1));
				}
			});
		}
	});

	// 更新图表数据
	if (tempChartInstance) {
		const newData = [
			tempChartInstance.getOption().series[0].data.slice(1).concat(
				tempChartInstance.getOption().series[0].data[6] + (Math.random() - 0.5) * 0.5
			),
			tempChartInstance.getOption().series[1].data.slice(1).concat(
				tempChartInstance.getOption().series[1].data[6] + (Math.random() - 0.5) * 0.5
			),
			tempChartInstance.getOption().series[2].data.slice(1).concat(
				tempChartInstance.getOption().series[2].data[6] + (Math.random() - 0.5) * 0.5
			)
		];

		tempChartInstance.setOption({
			series: [
				{ data: newData[0] },
				{ data: newData[1] },
				{ data: newData[2] }
			]
		});
	}
};

// 窗口大小变化时重新调整图表大小
const handleResize = () => {
	tempChartInstance?.resize();
	healthChartInstance?.resize();
};

onMounted(() => {
	initCharts();
	window.addEventListener('resize', handleResize);
	setInterval(updateData, 5000);
});

onBeforeUnmount(() => {
	window.removeEventListener('resize', handleResize);
	tempChartInstance?.dispose();
	healthChartInstance?.dispose();
});
</script>
  
<style scoped>
/* 基础样式调整 */
main {
	color: #333;
	min-height: 100vh;
	position: relative;
}

/* 概览卡片 */
.dashboard-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
	margin: 30px 0;
}

.overview-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
}

.overview-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 114, 255, 0.15);
}

.overview-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #00c6ff, #0072ff);
}

.card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	color: #555;
	font-size: 18px;
	font-weight: 500;
}

.card-title i {
	font-size: 22px;
	background: linear-gradient(45deg, #00c6ff, #0072ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.card-value {
	font-size: 42px;
	font-weight: 700;
	margin: 10px 0;
	color: #0072ff;
}

.card-trend {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
}

.trend-up {
	color: #00b862;
}

.trend-down {
	color: #ff1744;
}

/* 图表区域 */
.chart-section {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 25px;
	margin: 30px 0;
}

.chart-container {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.chart-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
}

.chart-actions {
	display: flex;
	gap: 15px;
}

.chart-btn {
	background: rgba(0, 114, 255, 0.08);
	border: 1px solid rgba(0, 114, 255, 0.2);
	color: #0072ff;
	padding: 8px 15px;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
}

.chart-btn:hover {
	background: rgba(0, 114, 255, 0.15);
}

.chart-btn.active {
	background: linear-gradient(90deg, #00c6ff, #0072ff);
	color: white;
}

.chart-wrapper {
	height: 350px;
	position: relative;
}

/* 区域监控 */
.area-monitor {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 25px;
	margin: 30px 0;
}

.area-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.area-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 114, 255, 0.15);
}

.area-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.area-name {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	display: flex;
	align-items: center;
	gap: 10px;
}

.area-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(0, 198, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #00c6ff;
}

.area-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 20px;
}

.stat-item {
	background: rgba(240, 245, 255, 0.7);
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.stat-label {
	color: #666;
	margin-bottom: 5px;
	font-size: 14px;
}

.stat-value {
	font-size: 24px;
	font-weight: 700;
	color: #0072ff;
}

.device-list {
	margin-top: 20px;
}

.device-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.device-item:last-child {
	border-bottom: none;
}

.device-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.device-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(0, 198, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #00c6ff;
}

.device-status {
	padding: 4px 12px;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 500;
}

.status-normal {
	background: rgba(0, 230, 118, 0.15);
	color: #00b862;
}

.status-warning {
	background: rgba(255, 196, 0, 0.15);
	color: #d6a100;
}

.status-offline {
	background: rgba(255, 23, 68, 0.15);
	color: #e01645;
}

/* 告警面板 */
.alerts-panel {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
	margin: 30px 0;
}

.alert-item {
	display: flex;
	align-items: center;
	padding: 15px;
	border-radius: 12px;
	margin-bottom: 15px;
	background: rgba(255, 23, 68, 0.08);
	border-left: 4px solid #ff1744;
	transition: all 0.3s ease;
}

.alert-item:hover {
	transform: translateX(5px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.alert-item.warning {
	background: rgba(255, 196, 0, 0.08);
	border-left: 4px solid #ffc400;
}

.alert-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 23, 68, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #ff1744;
	margin-right: 15px;
}

.alert-item.warning .alert-icon {
	background: rgba(255, 196, 0, 0.15);
	color: #ffc400;
}

.alert-content {
	flex: 1;
}

.alert-title {
	font-weight: 600;
	margin-bottom: 5px;
	color: #333;
}

.alert-desc {
	color: #666;
	font-size: 14px;
}

.alert-time {
	color: #999;
	font-size: 14px;
	margin-top: 3px;
}

.alert-action {
	padding: 8px 15px;
	background: rgba(0, 114, 255, 0.1);
	border-radius: 30px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #0072ff;
	font-weight: 500;
}

.alert-action:hover {
	background: rgba(0, 114, 255, 0.2);
}

/* 动画效果 */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 198, 255, 0.4);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(0, 198, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(0, 198, 255, 0);
	}
}

.pulse {
	animation: pulse 2s infinite;
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0px);
	}
}

.floating {
	animation: float 6s ease-in-out infinite;
}
</style>